<template>
  <div>
      <h2>Vue基本语法之双大括号语法</h2>
      <p>{{str}}</p>
      <div>{{msg}}</div>
      <input type="button" value="好好休息" @click="fn">
      <input type="button" value="修改str的值" @click="fn1">
      <div>name:{{preson.name}} age:{{preson.age}} sex:{{preson.sex}}</div>
      <input type="button" value="修改preson的值" @click="fn2">
  </div>
</template>

<script setup lang="ts">
//在vue中不能这样生成数据，这样生成的数据不叫响应式数据
//响应式数据（数据变了视图会更新）
  // let str = "hello"
  // let msg ="好好学习，天天向上"
//在vue中如何声明数据，让数据变成响应式数据
//1.ref
import {ref} from 'vue'
 let str = ref("hello")
let msg =ref("好好学习，天天向上")
  let preson =ref({
    name:"李名",
    age:20,
    sex:"男"
  })
  function fn() {
    alert("我要睡觉，不要叫醒我")
  }
  function fn1()
  {
    str.value="Good morning!"
    console.log(str);
  }
  function fn2()
  {
    preson.value.name="李白"
  }
</script>

<style lang="scss" scoped>

</style>